<template>
  <div>
    <!-- 编辑页面 -->
    <div class="edit_t">
      <span>头像</span>
      <div>
        <img @tap="chooseImg1()" :src="user.logo == '' ? '/static/images/avatar.png' : user.logo" alt="" />
        <img src="/static/images/next_arrow_nor@2x.png" alt="" />
      </div>
    </div>
    <div class="edit_t">
      <span>名字</span>
      <span><input @input="onKeyName" type="text" placeholder="请填写名称" :value="user.name" /></span>
      <!-- <span>{{user.name}}</span> -->
    </div>

    <!-- 确定按钮 -->
    <div @tap="onEdit()" class="edit_but">确定保存</div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      user: '',
      inputName: '',
      imageFile1: ''
    };
  },
  onReady() {
    // this.user = wx.getStorageSync('userInfo')
    let mobile =  wx.getStorageSync("mobile")
    this.request({
      url: this.baseUrl + '/api/edit/waterUser',
      data:{
        type: 1,
        mobile: mobile
      },
      method: 'POST',
    })
    .then(result=>{
			// console.log(result)
			if(result.status == 200){
        this.user = result.data.user_login
        this.inputName = this.user.name
        this.imageFile1 = this.user.logo
			} else {
        return false
			}
    })
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onKeyName: function(event) {
      this.inputName = event.target.value
    },
    /** 上传头像 */
    chooseImg1: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit1()
        }
      })
    },
    formSubmit1: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile1 = card.data.url
            that.user.logo = that.imageFile1
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    onEdit() {
      this.request({
        url: this.baseUrl + '/api/edit/waterUser',
        data:{
          username: this.inputName,
          image: this.imageFile1,
          uid: this.user.id
        },
        method: 'POST',
      })
      .then(result=>{
        // console.log(result)
        if(result.status == 200){
          wx.showToast({
            icon: 'success',
            title: '修改成功',
            duration: 1000,
            success:function(){
              setTimeout(function() {
                wx.navigateBack({
                  //返回上一页
                  url: "/pages/my/main"
                });
              }, 1000)
            }
          })
        } else {
          return false
        }
      })
    },
  },
  components: {},
};
</script>

<style scoped >
.edit_t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 26rpx 18rpx 26rpx 18rpx;
}
.edit_t > div > img:nth-child(2) {
  width: 18rpx;
  height: 30rpx;
  margin-left: 15rpx;
  /* background-color: chocolate; */
}
.edit_t > div > img:nth-child(1) {
  width: 100rpx;
  height: 100rpx;
  /* background-color: chocolate; */
  border-radius: 50%;
}
.edit_t > div {
  display: flex;
  align-items: center;
}
.edit_t input {
  text-align: right;
}
.edit_but {
  padding: 20rpx;
  background: #1677ff;
  text-align: center;
  margin: 70rpx 20rpx;
  border-radius: 20rpx;
  color: #ffffff;
}
</style>
